<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/common.css">
<style>
    #goodsIndex {
        color: #444;
    }

    .goods-image {
        width: 34px;
        height: 34px;
        margin-right: 10px;
        border: 1px solid #e6e6e6;
        flex-shrink: 0;
    }

    .sort-order {
        margin-left: 6px;
        color: #C0C4CC;
        flex-direction: row-reverse;
    }

    .icon-top {
        margin-left: -5px;
    }

    .el-popover {
        left: 46px;
        top: 10px;
    }

    .choose-container {
        margin-bottom: 10px;
    }

    .custom-choose,
    .custom-choose-type,
    .custom-choose-sub {
        height: 50px;
        border-radius: 4px;
        justify-content: space-between;
        padding: 0 20px;
        background: #fff;
    }

    .custom-choose-type,
    .custom-choose-sub {
        justify-content: flex-start;
    }

    .custom-choose-sub {
        height: 70px;
        padding: 0 10px 20px 20px;
    }

    .choose-status-tip {
        margin-right: 12px;
    }

    .custom-choose-type-tip {
        margin-right: 16px;
    }

    .choose-btn {
        width: 80px;
        border: 1px solid #E6E6E6;
        margin-right: 10px;
        height: 30px;
    }

    .choose-btn-active {
        background-color: #7536D0;
        border: none;
        color: #fff;
    }

    .choose-price {
        width: 140px;
    }

    .choose-price-line {
        margin: 0 14px;
    }

    .custom-table {
        /* padding: 20px 20px 30px; */
        padding-top: 20px;
        background: #fff;
    }

    .activity-type-btn {
        width: 40px;
        height: 20px;
        padding-top: 2px;
        border-radius: 4px;
        color: #fff;
        justify-content: center;
    }

    .common-button-container {
        justify-content: space-between;
    }

    .common-add-button {
        margin-right: 20px;
    }

    .common-pagination-container {
        justify-content: space-between;
    }

    .table-status-container {
        margin-right: 12px;
        cursor: pointer;
    }

    .table-status-up {
        color: #7438D5;
    }

    .table-status-down {
        color: #FF5959;
    }

    .table-status-hidden {
        color: #999
    }

    .operation-edit-text,
    .operation-copy-text,
    .operation-delete-text {
        cursor: pointer;
        color: #444;
        margin-right: 12px;
    }

    .operation-edit-text:hover {
        color: #7438D5;
    }

    .operation-copy-text:hover {
        color: #01CFA1;
    }

    .operation-delete-text:hover {
        color: #FF5959;
        margin-right: 0;
    }

    .table-status-button {
        width: 56px;
        height: 26px;
        border: 1px solid #7438D5;
        color: #7438D5;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 4px;
    }

    .table-status-down-button {
        color: #FF5959;
        border-color: #FF5959;
    }

    .table-status-hidden-button {
        color: #999;
        border-color: #999;
    }


    .all-btn-up,
    .all-btn-del,
    .all-btn-up1 {
        width: 60px;
        border: 1px solid #E5E5E5;
        margin-right: 20px;
    }

    .all-btn-up1:hover {
        color: #7438D5;
        border-color: #7438D5;
    }

    .all-btn-up:hover {
        color: #50E3C2;
        border-color: #50E3C2;
    }

    .all-btn-del:hover {
        color: #FF5959;
        border-color: #FF5959;
    }

    .goods_sku {
        color: #7438D5;
        margin-right: 12px;
    }
    .activity-status{
        padding: 6px 10px;
        font-size: 14px;
        line-height: 14px;
        border-radius: 4px;
    }
    .activity-status-ing{
        background: rgba(89, 89, 89, 0.1);
        border: 1px solid rgba(89, 89, 89, 0.5);
        color: #595959;
    }
    .activity-status-waiting{
        background: rgba(157, 96, 255, 0.1);
        border: 1px solid rgba(157, 96, 255, 0.5);
        color: #A268FF;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/groupon/libs/vue.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/moment.js"></script>
<div id="goodsIndex" v-cloak v-loading="allAjax" @click.stop="hideup()">
    <div class="choose-container">
        <div class="custom-choose display-flex">
            <div class="choose-status">
                <span class="choose-status-tip">筛选条件</span>
                <el-switch @change="isShoose" active-value="1" inactive-value="0" v-model="chooseType"
                    active-color="#7536D0" inactive-color="#E9EBEF">
                </el-switch>
            </div>
            <div class="custom-search">
                <el-input placeholder="请输入标题" suffix-icon="el-icon-search" v-model="searchKey" size="small">
                </el-input>
            </div>
        </div>
        <el-collapse-transition>
            <div v-if="chooseType==1">
                <div class="custom-choose-type display-flex">
                    <div class="custom-choose-type-tip">
                        活动类别
                    </div>
                    <div class="common-button choose-btn" :class="activityType=='all'?'choose-btn-active':''"
                        @click="chooseOpt('all')">
                        全部
                    </div>
                    <div class="common-button choose-btn" :class="activityType=='time_sale'?'choose-btn-active':''"
                        @click="chooseOpt('time_sale')">
                        限时购
                    </div>
                </div>
                <div class="custom-choose-type display-flex">
                    <div class="custom-choose-type-tip">
                        价格区间
                    </div>
                    <div class="choose-price">
                        <el-input v-model="priceFrist" size="small">
                            <template slot="append">元</template>
                        </el-input>
                    </div>
                    <div class="choose-price-line">
                        -
                    </div>
                    <div class="choose-price">
                        <el-input v-model="priceLast" size="small">
                            <template slot="append">元</template>
                        </el-input>
                    </div>
                </div>
                <div class="custom-choose-sub display-flex">
                    <div class="common-button choose-btn choose-btn-active" style="margin-right: 20px;"
                        @click="goodsOpt('filter')">
                        筛 选
                    </div>
                    <div class="common-button choose-btn" @click="goodsOpt('clear')">
                        重置
                    </div>
                </div>
            </div>
        </el-collapse-transition>
    </div>
    <div class="custom-table">
        <div class="common-button-container">
            <div class="display-flex">
                <div class="common-refresh-button" @click="getData">
                    <i class="el-icon-refresh"></i>
                </div>
                <div class="common-button common-add-button" @click="goodsOpt('create')">
                    <i class="el-icon-plus"></i>
                    <span>新增商品</span>
                </div>
                <div>
                    <el-radio-group v-model="activeStatus" fill="#7536D0" size="small">
                        <el-radio-button label="all">全部</el-radio-button>
                        <el-radio-button label="up">已上架</el-radio-button>
                        <el-radio-button label="down">已下架</el-radio-button>
                        <el-radio-button label="hidden">已隐藏</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <div class="common-button common-recycle-button" @click="goodsOpt('recycle')">
                <i class="fa fa-recycle"></i>
                回收站
            </div>
        </div>
        <div>
            <div class="common-table-container" v-loading="tableAjax">
                <el-table ref="multipleTable" :data="goodsData" border
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="40">
                    </el-table-column>
                    <el-table-column label="ID" prop="id" min-width="80" align="center">
                        <template slot="header" slot-scope="scope">
                            <div class="display-flex-c">
                                <div>ID</div>
                                <div class="display-flex sort-order">
                                    <i class="el-icon-sort-up icon-top"
                                        :style="{color:(sort=='id' && order=='asc')?'#7438d5':''}"
                                        @click="sortOrder('id','asc')"></i>
                                    <i class="el-icon-sort-down icon-bottom"
                                        :style="{color:(sort=='id' && order=='desc')?'#7438d5':''}"
                                        @click="sortOrder('id','desc')"></i>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品" min-width="220">
                        <template slot-scope="scope">
                            <div class="display-flex">
                                <el-image class="goods-image" v-if="scope.row.image"
                                    :src="Fast.api.cdnurl(scope.row.image)" fit="cover">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <div>
                                    <div class="ellipsis-item">
                                        <span class="goods_sku" v-if="scope.row.is_sku==1">
                                            {{scope.row.is_sku==1?'多规格':''}}
                                        </span>{{scope.row.title}}
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="类别" width="140" align="center">
                        <template slot-scope="scope">
                            <div class="activity-status activity-status-waiting"
                                v-if="scope.row.activity_status && scope.row.activity_status=='ing'">
                                限时购-进行中</div>
                            <div class="activity-status activity-status-ing"
                                v-else-if="scope.row.activity_status && scope.row.activity_status=='waiting'">
                                限时购-未开始</div>
                            <div class="activity-type display-flex" v-else>-</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="价格" min-width="90" align="center">
                        <template slot="header" slot-scope="scope">
                            <div class="display-flex-c">
                                <div>价格</div>
                                <div class="display-flex sort-order">
                                    <i class="el-icon-sort-up icon-top"
                                        :style="{color:(sort=='price' && order=='asc')?'#7438d5':''}"
                                        @click="sortOrder('price','asc')"></i>
                                    <i class="el-icon-sort-down icon-bottom"
                                        :style="{color:(sort=='price' && order=='desc')?'#7438d5':''}"
                                        @click="sortOrder('price','desc')"></i>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sales" label="销量" min-width="100" align="center">
                        <template slot="header" slot-scope="scope">
                            <div class="display-flex-c">
                                <div>销量</div>
                                <div class="display-flex sort-order">
                                    <i class="el-icon-sort-up icon-top"
                                        :style="{color:(sort=='sales' && order=='asc')?'#7438d5':''}"
                                        @click="sortOrder('sales','asc')"></i>
                                    <i class="el-icon-sort-down icon-bottom"
                                        :style="{color:(sort=='sales' && order=='desc')?'#7438d5':''}"
                                        @click="sortOrder('sales','desc')"></i>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="views" label="浏览量" min-width="90" align="center">
                        <template slot="header" slot-scope="scope">
                            <div class="display-flex-c">
                                <div>浏览量</div>
                                <div class="display-flex sort-order">
                                    <i class="el-icon-sort-up icon-top"
                                        :style="{color:(sort=='views' && order=='asc')?'#7438d5':''}"
                                        @click="sortOrder('views','asc')"></i>
                                    <i class="el-icon-sort-down icon-bottom"
                                        :style="{color:(sort=='views' && order=='desc')?'#7438d5':''}"
                                        @click="sortOrder('views','desc')"></i>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stock" label="库存" min-width="100" align="center">
                        <template slot="header" slot-scope="scope">
                            <div class="display-flex-c">
                                <div>库存</div>
                                <div class="display-flex sort-order">
                                    <i class="el-icon-sort-up icon-top"
                                        :style="{color:(sort=='stock' && order=='asc')?'#7438d5':''}"
                                        @click="sortOrder('stock','asc')"></i>
                                    <i class="el-icon-sort-down icon-bottom"
                                        :style="{color:(sort=='stock' && order=='desc')?'#7438d5':''}"
                                        @click="sortOrder('stock','desc')"></i>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="更新时间" min-width="148" align="center">
                        <template slot-scope="scope">
                            <div>
                                {{moment(scope.row.updatetime*1000).format("YYYY-MM-DD HH:mm:ss")}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="weigh" label="排序" min-width="80" align="center">
                        <template slot="header" slot-scope="scope">
                            <div class="display-flex-c">
                                <div>排序</div>
                                <div class="display-flex sort-order">
                                    <i class="el-icon-sort-up icon-top"
                                        :style="{color:(sort=='weigh' && order=='asc')?'#7438d5':''}"
                                        @click="sortOrder('weigh','asc')"></i>
                                    <i class="el-icon-sort-down icon-bottom"
                                        :style="{color:(sort=='weigh' && order=='desc')?'#7438d5':''}"
                                        @click="sortOrder('weigh','desc')"></i>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="190" fixed="right">
                        <template slot-scope="scope">
                            <div class="display-flex">
                                <el-popover placement="bottom" width="120" trigger="hover">
                                    <div class="display-flex-b">
                                        <div class="table-status-button table-status-up-button"
                                            v-if="scope.row.status!='up'" @click="editStatus(scope.row.id,'up')">
                                            上架
                                        </div>
                                        <div class="table-status-button table-status-down-button"
                                            v-if="scope.row.status!='down'" @click="editStatus(scope.row.id,'down')">
                                            下架
                                        </div>
                                        <div class="table-status-button table-status-hidden-button"
                                            v-if="scope.row.status!='hidden'" @click="editStatus(scope.row.id,'hidden')">
                                            隐藏
                                        </div>
                                    </div>
                                    <div slot="reference" class="table-status-container">
                                        <span class="table-status-up" v-if="scope.row.status=='up'">
                                            {{scope.row.status_text}}
                                        </span>
                                        <span class="table-status-down" v-if="scope.row.status=='down'">
                                            {{scope.row.status_text}}
                                        </span>
                                        <span class="table-status-hidden" v-if="scope.row.status=='hidden'">
                                            {{scope.row.status_text}}
                                        </span>
                                    </div>
                                </el-popover>
                                <span class="operation-edit-text" @click="goodsOpt('edit',scope.row.id)">编辑
                                </span>
                                <span class="operation-copy-text" @click="goodsOpt('copy',scope.row.id)">复制
                                </span>
                                <span class="operation-delete-text" @click="goodsOpt('del',scope.row.id)">删除</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="common-pagination-container">
                <div class="display-flex">
                    <div class="common-button all-btn-up1" @click="goodsOpt('up',null)" v-if="activeStatus!='up'">
                        上架
                    </div>
                    <div class="common-button all-btn-up" @click="goodsOpt('down',null)" v-if="activeStatus!='down'">
                        下架
                    </div>
                    <div class="common-button all-btn-del" @click="goodsOpt('del',null)">
                        删除
                    </div>
                </div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
                </el-pagination>
            </div>
        </div>
    </div>
</div>